
@inject('commentPresenter', 'App\Presenters\CommentPresenter')
@inject('topicPresenter', 'App\Presenters\TopicPresenter')
<div id="topic-detail" class="container-fluid topic-show">
    <header>
        <table class="table">
            <tbody>
            <tr>
                <td class="left-part"><h4>查看: {{ $topic->view_count }} | 回复: {{ $topic->comment_count }}</h4></td>
                <td><h1>【{{ $topic->typeName }}】{{ $topic->title }}</h1></td>
            </tr>
            </tbody>
        </table>
    </header>
    <div class="comment-list">
        @foreach($list as $comment)
            <table class="table" data-comment-id="{{ $comment->id }}" id="comment-{{ $comment->id }}">
                <tbody>
                <tr>
                    <td class="left-part">
                        <div>
                            <div class="name"><strong>{{ optional($comment->user)->username }}</strong></div>
                            <p><img alt="" src="/dashboard/img/avatar-1.jpg"></p>
                            <table class="table stat-box">
                                <tbody>
                                <tr>
                                    <th><p>{{ optional($comment->user)->topic_count }}</p>话题</th>
                                    <th><p>{{ optional($comment->user)->comment_count }}</p>回复</th>
                                    <th><p>{{ optional($comment->user)->score_count }}</p>经验</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                    <td class="right-part">
                        <div class="manage-actions">
                            @if($comment->trashed())
                                <button class="btn btn-sm btn-danger btn-comment-restore" data-url="{{ route('admin.comment.restore', [$comment->id]) }}">恢复</button>
                            @else
                                <button class="btn btn-sm btn-primary btn-comment-delete" data-url="{{ route('admin.comment.destroy', [$comment->id]) }}">删除</button>
                            @endif
                            @if($comment->is_main_floor)
                            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-change-sensitivity-{{$comment->id}}">更改敏感值({{ $topic->sensitivity }})</button>
                            <div id="modal-change-sensitivity-{{$comment->id}}" class="modal fade" tabindex="-1" role="dialog">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">更改敏感值</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="form-group">
                                                    <label class="control-label">新的敏感值</label>
                                                    <input type="text" name="sensitivity" class="form-control" id="" value="{{ $topic->sensitivity }}">
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary modal-submit">保存</button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                            @endif
                        </div>
                        <div class="comment-content">
                            @if($comment->is_main_floor == 1 && $topic->is_report)
                                <div class="report">{!! $topicPresenter->renderReport($topic) !!}</div>
                            @endif
                            {!! $commentPresenter->renderDetail($comment) !!}
                            @if($comment->is_main_floor == 1 && $comment->hide)
                                <h5 style="margin: 20px 0"><strong><i>{!! $comment->hide->require_header !!}</i></strong></h5>
                                {!! $commentPresenter->renderDetail($comment, ['comment_relation' => 'hide']) !!}
                            @endif
                        </div>
                    </td>
                </tr>
                <tr class="tr-action">
                    <td class="left-part"></td>
                    <td>
                        @if($comment->is_main_floor == 1 && $topic->lastOperationLog)
                            <div class="text-center">{!! $topicPresenter->renderLastOperationLog($topic) !!} </div>
                        @endif
                        <div class="action-wrap text-right">
                            <span>{{ $commentPresenter->getFloorNumHuman($comment) }}</span>
                            <span>{{ $comment->created_at->format('Y-m-d H:i') }}</span>
                            <span class="show-comment-comment" data-expanded="{{ $comment->firstComments->isNotEmpty() ? 1 : 0 }}" data-pid="{{ $comment->id }}">
                                <a href="javascript:;">回复(<span class="comment-comment-count">{{ $comment->comment_count }}</span>)</a>
                            </span>
                            <span><a href="{{ $commentPresenter->getEditLink($comment) }}">编辑</a></span>
                            <span title="赞" class="pointer"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
                        </div>
                        @if($comment->floor_num > 1)
                        <div class="comment-comment-wrap {{ $comment->firstComments->isEmpty() ? 'hide' : '' }}">
                            @include('admin.topic.comment_comment', ['list' => $comment->firstComments, 'rootComment' => $comment, 'page' => 1])
                        </div>
                        @endif
                    </td>
                </tr>
                </tbody>
            </table>
        @endforeach
    </div>
    <div style="text-align: right;">{!! $list->links() !!}</div>
    <div class="add-comment" id="add-comment">
        <table class="table">
            <tbody>
            <tr>
                <td class="left-part">
                    <div>
                        <h2>{{ $user->username }}</h2>
                        <p><img alt="" src="{{ $user->avatar }}"></p>
                    </div>
                </td>
                <td id="comment-form-wrap">
                    <form id="comment-form" method="post" action="{{ route('admin.comment.store') }}"
                          enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="tid" value="{{ $topic->id }}"/>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                @include('admin.common.message')
                            </div>
                        </div>
                        <div class="form-group row{{$errors->has('content_detail') ? ' has-danger' : ''}}">
                            <div class="col-sm-6">
                                <textarea rows="4" class="form-control" name="content_detail"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6 text-center">
                                <input type="submit" class="btn btn-success" value="快速回复">
                                <a href="{{ route('admin.comment.create', ['tid' => $topic->id]) }}" class="btn pull-right">高级</a>
                            </div>
                        </div>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <form id="float-form" style="display: none;">
        <div class="form-group">
            <textarea class="form-control" rows="3" name="content_detail"></textarea>
            <input type="hidden" name="pid" value="">
            {{ csrf_field() }}
        </div>
        <div class="form-group" style="text-align: center;">
            <button type="button" class="btn btn-success submit" style="margin-right: 20px;">提交</button>
            <button type="button" class="btn btn-default cancel">取消</button>
        </div>
    </form>
</div>
<script>
    var $topicDetail = $('#topic-detail');
    var $commentForm = $('#float-form');
    var $commentFormCancel = $commentForm.find('.cancel');
    var $commentFormTextarea = $commentForm.find('textarea');
    var $pid = $commentForm.find("input[name=pid]");
    var $activeTable = null

    function cancelComment() {
        $commentForm.hide().appendTo($('body'));
        $pid.val("");
    }

    $commentFormCancel.click(function (e) {
        cancelComment();
    });

    $commentForm.on("click", ".submit", function (e) {
        $.ajax({
            url: "{{ route('admin.comment.store') }}",
            type: "post",
            dataType: "json",
            data: $commentForm.serialize()
        }).done(function (response) {
            $activeTable.find('.comment-comment-count').text(response.data.root_comment.comment_count)
            if (response.ret == 0) {
                cancelComment()
                $.when(getComments($activeTable.attr('data-comment-id'), 1)).done(function (response) {
                    $activeTable.find(".comment-comment-wrap").removeClass('hide').show().html(response.data.html)
                }).fail(function (xhr, error) {
                    alert(error)
                    console.log(error);
                });

            } else {
                alert(response.msg)
            }
        }).error(function (xhr, error) {
            console.log(error);
            alert(error)
        })
    })


    $topicDetail.on("click", ".show-comment-comment", function (e) {
        var $this = $(this);
        var $td = $this.closest("td");
        var expanded = $this.attr("data-expanded");
        if (expanded == "0") {
            $.when(getComments($td.closest("table").attr("data-comment-id"), 1)).done(function (response) {
                if (response.ret == 0) {
                    $this.attr("data-expanded", 1);
                    $td.find(".comment-comment-wrap").show().html(response.data.html);
                    showFormTo($this);
                }
            }).fail(function () {
                console.log(arguments);
            })
        } else {
            //已经展示，隐藏掉
            cancelComment()
            $td.find('.comment-comment-wrap').hide()
            $this.attr('data-expanded', 0)
        }
    });

    $topicDetail.on("click", ".reply-to-someone", function (e) {
        showFormTo($(this));
    });

    $topicDetail.on("click", ".reply-to-main-comment", function (e) {
        showFormTo($(this));
    });

    function showFormTo($elem) {
        $activeTable = $elem.closest('table')
        var pid = $activeTable.attr("data-comment-id");
        $pid.val(pid);
        console.log('pid: ' + pid)

        $elem.closest("td").append($commentForm.show());

        if ($elem.hasClass("reply-to-someone")) {
            var name = $elem.closest(".media-body").find(".name").text();
            var pid = $elem.attr("data-id");
            $commentFormTextarea.attr("placeholder", "回复：" + name).val("");
            $pid.val(pid);
            console.log('reply to someone, change pid: ' + pid)
        } else {
            $commentFormTextarea.attr("placeholder", "回复本楼层").val("");
        }

    }

    function getComments(rootId, page) {
        var url = "{{ route('admin.comment.comment')}}";
        var data = {
            tid: "{{ $topic->id }}",
            root_id: rootId,
            page: page
        }
        return $.ajax({
            url: url,
            data: data,
            method: "get",
            dataType: "json",
        });
    }


    //图片预览
    $topicDetail.on("click", ".attachment-image", function (e) {
        var $this = $(this);
        if (!$this.data("expand")) {
            $this.css({maxWidth: 800, maxHeight: 800}).data("expand", 1);
        } else {
            $this.removeAttr("style").data("expand", 0);
        }
    })

    $topicDetail.on("click", ".comment-comment .pagination a", function (e) {
        var $wrap = $(this).closest('.comment-comment-wrap');
        $.ajax({
            url: this.getAttribute("href"),
            method: "get",
            dataType: "json",
        }).done(function (response) {
            console.log(response);
            $wrap.html(response.data.html);
        }).fail(function (xhr, errstr) {
            alert(errstr);
        }).always(function() {

        });
        return false;
    })

    //修改敏感度模态框
    $topicDetail.on('click', '.modal-submit', function () {
        var $modal = $(this).closest('.modal');
        var value = $modal.find('input[name=sensitivity]').val();
        var url = "{{ route('admin.topic.sensitivity.change') }}";
        var data = {tid: "{{ $topic->id }}", _token: "{{ csrf_token() }}"};
        data.sensitivity = value;
        $.post(url, data, function (response) {
            console.log(response)
            if (response.ret == 0) {
                $modal.modal('hide')
                location.reload()
            } else {
                alert(response.msg);
            }
        }, "json");
    })

    //删除评论
    $topicDetail.on('click', '.btn-comment-delete', function () {
        if (!window.confirm('确定要删除？')) {
            return
        }
        var $this = $(this)
        var url = $this.attr('data-url');
        var data = {_token: "{{ csrf_token() }}", _method: "DELETE"};

        $.post(url, data, function (response) {
            console.log(response)
            if (response.ret == 0) {
                location.reload()
            } else {
                alert(response.msg);
            }
        }, "json");
    })

    //恢复评论
    $topicDetail.on('click', '.btn-comment-restore', function () {
        if (!window.confirm('确定要恢复？')) {
            return
        }
        var $this = $(this)
        var url = $this.attr('data-url');
        var data = {_token: "{{ csrf_token() }}"};

        $.post(url, data, function (response) {
            console.log(response)
            if (response.ret == 0) {
                location.reload()
            } else {
                alert(response.msg);
            }
        }, "json");
    })


</script>